---
const clients = [
  {
    name: "1",
    logo: "http://demo.openauth.net.cn:8887/upload_files/200516065826546.png", 
    website: "#"
  },
  {
    name: "2",
    logo: "https://www.sinopharmholding.com/portals/0/Skins/Gone/img/logo.png",
    website: "#"
  },
  {
    name: "3",
    logo: "http://www.cqjft.com/images/logo.png",
    website: "#"
  },
  {
    name: "4",
    logo: "http://asdrobotics.com/template/asd/images/logo.png",
    website: "#"
  },
  {
    name: "5",
    logo: "http://www.arscmh.com/template/1/default/_files/images/logo.png",
    website: "#"
  },
  {
    name: "6",
    logo: "http://www.17gp.com/images/logo5.png",
    website: "#"
  },
  {
    name: "7",
    logo: "https://cq-p.com.cn/cqpwps/images/index/logo_sys.gif",
    website: "#"
  },
  {
    name: "8",
    logo: "http://www.ut-soft.cn/static/assets/img/logo/logo.png",
    website: "#"
  },
  {
    name: "9",
    logo: "https://files.esurl.cn/esmartwave/2018/img/yuanhui.png",
    website: "#"
  },
  {
    name: "10",
    logo: "http://www.sxhtbf.com/uploadfiles/pictures/setting/20160316141249_1093.jpg",
    website: "#"
  },
  {
    name: "11",
    logo: "https://zhengxin-pub.cdn.bcebos.com/logopic/6ff3cf1658391c72ea5a5d5061f7c43f_fullsize.jpg",
    website: "#"
  },
  {
    name: "12",
    logo: "http://www.xinyegroup.com/templates/main/images/logo.png",
    website: "#"
  }
];
---

<section id="clients" class="section py-8">
  <div class="container-custom">
    <div class="text-center max-w-3xl mx-auto mb-8">
      <h2 class="mb-3 text-gray-900 dark:text-white">我们的客户</h2>
      <p class="text-gray-600 dark:text-gray-300">
        与行业领先企业合作，提供卓越的解决方案
      </p>
    </div>
    
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 md:gap-6">
      {clients.map((client, index) => (
        <a 
          href={client.website}
          target="_blank"
          rel="noopener noreferrer"
          class="client-logo-card flex items-center justify-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 hover:shadow-lg transition-all duration-300 slide-up" 
          style={`animation-delay: ${index * 100}ms`}
        >
          <img 
            src={client.logo} 
            alt={`${client.name} 标志`} 
            class="max-h-12 max-w-full grayscale hover:grayscale-0 transition-all duration-300"
            loading="lazy"
          />
        </a>
      ))}
    </div>
  </div>
</section>